<template>
  <a-form>
    <a-divider orientation="left"><span style="color: rgba(0, 0, 0, 0.4)">基本信息</span></a-divider>
    <a-form-item
      label="数据类型"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      required
      :validate-status="typeCodeValidateStatus"
      :help="typeCodeHelp"
    >
      <a-select placeholder="请选择数据类型" v-model="form.typeCode">
        <a-select-option
          v-for="item in dataType"
          :key="item.code"
          :value="item.code"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-divider orientation="left"><span style="color: rgba(0, 0, 0, 0.4)">时空信息</span></a-divider>
    <a-form-item
      label="时间信息"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
<!--      <a-switch v-model="timeColumnCheck" size="small"/><span style="font-size: 12px;margin-left: 5px;">指定表格字段</span><br>-->
      <a-select v-model="form.timeType" style="width: 90px;margin-right: 10px;" @change="handleTimeTypeChange" default-value="year">
        <a-select-option v-for="type in timeType" :key="type.value">
          {{ type.label }}
        </a-select-option>
      </a-select>

      <span v-if="!timeColumnCheck">
        <a-select v-model="form.time.value" v-if="form.timeType === 'year'" style="width: 180px" :default-value="currentYear">
          <a-select-option v-for="y in year" :key="y">
            {{ y }}
          </a-select-option>
        </a-select>

        <a-month-picker v-model="form.time.value" v-if="form.timeType === 'month'" placeholder="选择月份"/>
        <a-date-picker v-model="form.time.value" v-if="form.timeType === 'day'" placeholder="选择日期" />
      </span>
      <span v-else>
        <a-select v-model="form.time.column" @change="timeColumnChange" placeholder="请选择时间对应的表格字段" style="width: 200px">
          <a-select-option v-for="item in columns" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
        </a-select>
      </span>
    </a-form-item>

    <!-- 只有在不是shp数据时展示 -->
    <a-row v-if="!isShapeFile">
      <a-col :span="12">
        <a-form-item label="经度" :labelCol="halfLabelCol" :wrapperCol="halfWrapperCol">
          <a-select v-model="form.lngColumnTableId" placeholder="请选择经度对应的表格字段">
            <a-select-option v-for="item in columns" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="纬度" :labelCol="halfLabelCol" :wrapperCol="halfWrapperCol">
          <a-select v-model="form.latColumnTableId" placeholder="请选择纬度对应的表格字段" >
            <a-select-option v-for="item in columns" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
    </a-row>
    <a-form-item v-else label="多边形经纬度" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <span>the_geom</span>
    </a-form-item>

<!--    <a-form-item-->
<!--      v-if="!isShapeFile"-->
<!--      label="多边形经纬度"-->
<!--      :labelCol="labelCol"-->
<!--      :wrapperCol="wrapperCol"-->
<!--    >-->
<!--      <a-select placeholder="请选择多边形经纬度对应的属性" >-->
<!--        <a-select-option v-for="item in columns" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>-->
<!--      </a-select>-->
<!--    </a-form-item>-->
  </a-form>
</template>

<script>
import { listCity, listProvince, listRegion } from "@/api/modular/main/biindexdata/biIndexDataManage";
import { Cascader } from 'ant-design-vue'
import _ from 'lodash'
import { baseDataTableList } from "@/api/modular/main/tsdatarecord/baseDataTable";
import { biIndexTypeSelectTree } from "@/api/modular/main/biindextype/biIndexTypeManage";
import { defineData } from "@/api/modular/main/tsdatarecord/timeSpaceDataRecordManage";
import { baseDataTypeList } from '@/api/modular/main/tsdatarecord/baseDataType'
import { getByRecordId } from "@/api/modular/main/tsdatarecord/baseDataDefine";
import moment from "moment";
export default {
  name: 'defineData',
  components: {
    'a-cascader': Cascader
  },
  data() {
    return {
      record: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      halfLabelCol: { xs: { span: 48 }, sm: { span: 8 }},
      halfWrapperCol: { xs: { span: 48 }, sm: { span: 14 }},
      dataType: [],
      areaOptions: [],
      areas: [],
      columns: [],
      typeTreeData:[],
      timeType: [{ value: 'year', label: '年份'}, { value: 'month', label: '月份'}, { value: 'day', label: '日期'}],
      year: [],
      currentYear: new Date().getFullYear(),
      minYear: 2012,
      form: {
        timeType: 'year',
        time: {
          column: null,
          year: new Date().getFullYear()
        },
        space: {
          province: { name: '', column: null },
          city: { name: '', column: null },
          region: { name: '', column: null }
        },
        lngColumnTableId: '',
        latColumnTableId: ''
      },
      oldForm: {
        timeType: 'year',
        time: {
          column: null,
          year: new Date().getFullYear()
        },
        space: {
          province: { name: '', column: null },
          city: { name: '', column: null },
          region: { name: '', column: null }
        },
        lngColumnTableId: '',
        latColumnTableId: ''
      },
      timeColumnCheck: false,
      spaceColumnCheck: false,
      typeCodeValidateStatus: '',
      typeCodeHelp: '',
      isShapeFile: false
    }
  },
  created() {
    this.loadDataType()
    this.year = []
    for (let y = this.currentYear; y > this.minYear - 1; y--) {
      this.year.push(y)
    }
  },
  methods: {
    init(record) {
      this.record = record
      this.loadDefineData()
      baseDataTableList({ recordId: record.id }).then(res => {
        if (res.success) {
          this.columns = []
          if (res.data && res.data.length > 0) {
            this.isShapeFile = res.data[0].title === 'the_geom'
            this.columns = res.data
            this.form.time.column = this.columns[0].id
            this.$forceUpdate()
          }
        }
        this.$emit('load-define')
      })
    },
    doSave() {
      const body = {
        recordId: this.record.id,
        type: this.isShapeFile ? 1 : 0,
        isColumnTime: this.timeColumnCheck,
        timeLevel: this.form.timeType,
        timeColumnTableId: this.form.time.column,
        time: this.form.time.value,
        typeCode: this.form.typeCode
      }
      if (body.timeLevel === 'month') {
        body.time = body.time.format('YYYY-MM')
      } else if (body.timeLevel === 'day') {
        body.time = body.time.format('YYYY-MM-DD')
      }
      if (this.isShapeFile) {
        body.coverColumnTableId = this.columns[0].id
      } else {
        body.lngColumnTableId = this.form.lngColumnTableId
        body.latColumnTableId = this.form.latColumnTableId
      }
      defineData(body).then(res => {
        if (res.success) {
          this.$message.success('正在导入数据！')
          this.clearForm()
          this.$emit('success')
        } else {
          this.$message.warning('导入失败！')
        }
      })
    },
    timeColumnChange(value) {

    },
    handleTimeTypeChange(value) {
      this.form.time = {}
    },
    loadSelectTree() {
      biIndexTypeSelectTree({}).then((res) => {
        if (res.success) {
          this.typeTreeData = res.data
        }
      })
    },
    loadProvince() {
      listProvince().then(res => {
        this.areaOptions = []
        if (res.success) {
          _.forEach(res.data, d => {
            this.areaOptions.push({
              label: d.name,
              value: d.areaCode,
              isLeaf: false,
              level: d.levelCode
            })
          })
        }
      })
    },
    loadAreaData(selectedOptions) {
      console.log(selectedOptions)
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;

      if (targetOption.level === 0) {
        listCity({ proCode: targetOption.value }).then(res => {
          if (res.success) {
            targetOption.children = []
            _.forEach(res.data, d => {
              targetOption.children.push({
                label: d.name,
                value: d.areaCode,
                isLeaf: false,
                level: d.levelCode
              })
            })
            this.areaOptions = [...this.areaOptions];
          }
          targetOption.loading = false;
        })
      }
      if (targetOption.level === 1) {
        listRegion({ citCode: targetOption.value }).then(res => {
          if (res.success) {
            targetOption.children = []
            _.forEach(res.data, d => {
              targetOption.children.push({
                label: d.name,
                value: d.areaCode,
                isLeaf: true,
                level: d.levelCode
              })
            })
            this.areaOptions = [...this.areaOptions];
          }
          targetOption.loading = false;
        })
      }
    },
    handleAreaChange(area) {
    },
    loadDataType() {
      baseDataTypeList().then(res => {
        if (res.success) {
          this.dataType = res.data
        }
      })
    },
    loadDefineData() {
      getByRecordId(this.record.id).then(res => {
        if (res.success && res.data) {
          this.timeColumnCheck = res.data.isColumnTime
          this.form.timeType = res.data.timeLevel
          this.form.time.column = res.data.timeColumnTableId
          this.form.typeCode = res.data.typeCode
          if (res.data.timeLevel === 'year') {
            this.form.time.value = res.data.time
          } else {
            this.form.time.value = moment(res.data.time)
          }
        }
      })
    },
    clearForm() {
      this.form = _.cloneDeep(this.oldForm)
      this.record = {}
      this.timeColumnCheck = false
      this.spaceColumnCheck = false
      this.typeCodeValidateStatus = ''
      this.typeCodeHelp = ''
      this.isShapeFile = false
      this.columns = []
    }
  }
}
</script>

<style scoped lang="less">
.index-type-wrapper {
  max-height: 340px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 8px;
  background-color: rgba(0,0,0,0.03);
  margin-left: 40px;
  margin-right: 10px;
}

.colon-span {
  margin: 0 8px 0 2px;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  //background-color: #8c8c8c;
  background-color: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-track {
  background-color: #f6f6f6;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
  border: 0;
}
</style>
